<script setup>
import { ref, watch } from 'vue';



const props = defineProps({
    type: String,
    raius: String
})

const tagStyle = ref(null)

watch([() => props.type, () => props.raius], () => {
    let type = props.type
    let raius = props.raius
    let bgColor = '#2d8cf0'
    let color = 'white'
    switch (type) {
        case 'primary':
            break;
        case 'info':
            bgColor = '#2db7f5'
            break
        case 'success':
            bgColor = '#19be6b'
            break
        case 'warning':
            bgColor = '#ff9900'
            break
    }
    tagStyle.value = {
        color: color,
        background: bgColor,
        'border-radius': raius ? raius : '50%',
        padding: '5px 8px'
    }
}, {
    immediate: true
})
</script>

<template>
    <div :style="tagStyle" style="user-select: all;cursor: pointer;">
        <slot></slot>
    </div>
</template>